<!--
 * @Author: your name
 * @Date: 2021-11-26 19:27:09
 * @LastEditTime: 2021-12-02 13:50:40
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\client\src\view\tag\index.vue
-->
<template>
  <div class="tag">
    <div class="left-tag">
      <HintCom
        :text="text"
        :num="num"
        :title="$t('tag_article')"
        :prefix="$t('total_search')"
        :piece="$t('count')"
        :about="$t('about')"
      />
      <el-card class="tag-card">
        <div slot="header" class="clearfix">
          <span>{{ $t("tags_title") }}</span>
        </div>
        <div class="tab-box">
          <button
            v-for="item in TagList"
            :key="item.id"
            @click="toTagDetail(item.value)"
            :class="activeClass(item.value)"
          >
            {{ item.text }}
          </button>
        </div>
      </el-card>
      <el-card class="main-card">
        <NavContent
          :data="articleList"
          :handlerClick="toArticleDetail"
          v-if="articleList.length"
        />
        <p v-else class="notData">暂无数据</p>
      </el-card>
    </div>
    <div class="right-tag">
      <RecommendArticle
        :data="recommendArticle"
        :handlerClick="toArticleDetail"
        :title="$t('recommend_title')"
      />
      <ClassifyCom
        :data="classifyList"
        :handlerClick="toClassifyDetail"
        :title="$t('article_cate')"
      />
    </div>
  </div>
</template>

<script>
import api from "../../api";
import getDateDiff from "../../utils/getDateDiff";
import RecommendArticle from "../../components/Recommend.vue";
import ClassifyCom from "../../components/ClassifyCom.vue";
import HintCom from "../../components/HintCom.vue";
import NavContent from "../../components/NavContent.vue";
export default {
  components: {
    RecommendArticle,
    ClassifyCom,
    HintCom,
    NavContent,
  },
  data() {
    return {
      recommendArticle: [],
      classifyList: [],
      articleList: [],
      allArticle: [],
      TagList: [],
      num: 0,
      text: "",
    };
  },
  computed: {
    valuePath() {
      const route = this.$route.params.value;
      return route;
    },
  },
  watch: {
    valuePath() {
      this.getClientTag();
    },
  },
  methods: {
    //初始化调用
    init() {
      this.getAllArticle();
      this.getClientTag();
      this.getClassifyNum();
      this.getRecommendArticle();
    },
    //获取全部文章
    async getAllArticle() {
      const res = await api.getStateArticle();
      if (res.success) {
        this.allArticle = res.data;
        this.allArticle = this.allArticle.map((item) => {
          return {
            ...item,
            release_time: getDateDiff(new Date(item.release_time).getTime()),
          };
        });
      } else {
        this.$message({
          type: "warning",
          message: "意外的错误",
        });
      }
    },
    //获取最新文章
    async getRecommendArticle() {
      const res = await api.recommendArticle();
      if (res.success) {
        this.recommendArticle = res.data;
        this.recommendArticle = this.recommendArticle.map((item) => {
          return {
            ...item,
            release_time: getDateDiff(new Date(item.release_time).getTime()),
          };
        });
        this.getTagNum();
      } else {
        this.$message({
          type: "warning",
          message: "意外的错误",
        });
      }
    },
    async getTagArticleList() {
      const res = await api.getTagArticle(this.text);
      this.articleList = res.data;
      this.articleList = this.articleList.map((item) => {
        return {
          ...item,
          release_time: getDateDiff(new Date(item.release_time).getTime()),
        };
      });
    },
    //获取标签列表
    async getClientTag() {
      const res = await api.getClientTag();
      if (res.success) {
        this.TagList = res.data;
        this.TagList = this.TagList.map((item) => {
          if (item.num) return item;
          return { ...item, num: 0 };
        });
        this.TagList.sort((a, b) => {
          return b.num - a.num;
        });
        const index = this.TagList?.findIndex(
          (item) => item.value === this.valuePath
        );
        //text赋值
        this.text = this.TagList[index]?.text;
        this.getTagArticleList();
        this.getTagNum();
      } else {
        this.$message({
          type: "warning",
          message: "意外的错误",
        });
      }
    },
    //tag文章数量
    getTagNum() {
      this.num = 0;
      const index = this.TagList?.findIndex(
        (item) => item.value === this.valuePath
      );
      this.allArticle.forEach((item) => {
        if (item.tag === this.TagList?.[index]?.text) {
          this.num = this.num + 1;
        }
      });
    },
    //跳转文章详情
    toArticleDetail(id) {
      this.$router.push({
        path: `/article/${id}`,
      });
    },
    //分类各个数量
    async getClassifyNum() {
      const res = await api.getClassifyNum();
      if (res.success) {
        this.classifyList = res.data;
        this.classifyList = this.classifyList.map((item) => {
          if (item.num) return item;
          return { ...item, num: 0 };
        });
        this.classifyList.sort((a, b) => {
          return b.num - a.num;
        });
      } else {
        this.$message({
          type: "warning",
          message: "意外的错误",
        });
      }
    },
    //分类详情
    toClassifyDetail(data) {
      this.$router.push(`/classify/${data}`);
    },
    toTagDetail(data) {
      this.$router.push(`/tag/${data}`);
    },
    activeClass(value) {
      if (value === this.valuePath) {
        return "active";
      } else {
        return "";
      }
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/common/common.scss";
.tag {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  .left-tag {
    width: 70%;
  }
  .right-tag {
    width: 28%;
  }
}
.clearfix {
  font-size: 14px;
  font-weight: bold;
  @include font_color("text-color");
}
.tag-card {
  margin: 20px 0;
  @include background_color("card_background");
  @include font_color("text-color");
  border: none;
}
.main-card {
  @include background_color("card_background");
  border: none;
  .notData {
    @include font_color("text-color");
    text-align: center;
    line-height: 45px;
  }
}
.tab-box {
  display: flex;
  align-items: center;

  button {
    margin-right: 20px;
    @include background_color("card_background");
    @include font_color("text-color");
    border: 1px solid;
    @include border_color("btn_border_color");
    outline: none;
    padding: 2px 14px;
    cursor: pointer;
  }
  button:hover {
    color: #ff0064 !important;
    border-color: #ff0064 !important;
  }
  button.active {
    background-color: #ff0064 !important;
    color: #fff !important;
    border: none;
  }
  .active:hover {
    background-color: #ff0064;
    color: #fff;
  }
}
</style>
